<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <el-table :data="dataList" stripe border style="width: 100%">
        <el-table-column type="index" width="45" > </el-table-column>
        <el-table-column prop="order_number" label="订单编号">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格"> </el-table-column>
        <el-table-column prop="pay_status" label="是否付款">
          <template slot-scope="scope">
             <el-tag type="success" v-if="scope.row.pay_status === '1'">已付款</el-tag>
             <el-tag type="danger " v-else>未付款</el-tag>
           </template>
         </el-table-column>
        <el-table-column prop="is_send" label="是否发货"> </el-table-column>
        <el-table-column prop="update_time" label="下单时间"> </el-table-column>
      </el-table>

      <!-- 分页器 -->

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[5, 4, 3, 2, 1]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { timesampToDate } from '../../utils/date'
export default {
  created() {
    this.getListFn()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getListFn()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      this.getListFn()
    },

    async getListFn() {
      const res = await this.$http({
        method: 'get',
        url: 'orders',
        params: {
          pagenum: this.pageNum, //当前页码
          pagesize: this.pageSize, //每条显示条数
        },

      })
  console.log(res);
      var list = res.data.data.goods
      //转换时间戳
      for (let i = 0; i < list.length; i++) {
        const element = list[i]
        var date = timesampToDate(element.update_time)
        element.update_time = date
      }
      this.dataList = list
      this.total = res.data.data.total
      
    },

  },

  data() {
    return {
     
      dataList: [],
      currentPage1: 1,
      pageNum: 1,
      pageSize: 5, //每条显示多少
      total: undefined,
    }
  },
}
</script>

<style lang="less" scoped>
</style>
